<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品占比</title>
</head>
<body>
	<div style="width:100%;height:90%;">
		<div id="product" style="width:100%;height: 100%;margin-top: 20px;"></div>
	</div>
	<script>
	
	var prodata;
	var proname=[];
	$(document).ready(function() {
		var url='/getProductRatio';
		var reData = common_ajax.ajaxFunc(url,null,"json");
		prodata=reData;
		for(var i=0;i<reData.length;i++)
		{
			proname.push(reData[i].name);
		}
	});
	
	/*产品占比饼状图*/
	require.config({
	        paths: {
	            echarts: 'http://echarts.baidu.com/build/dist'
	        }
	    });
	     require(
	    [
	        'echarts',
	        'echarts/chart/pie',
	        'echarts/chart/bar',
	        'echarts/chart/funnel',
	        'echarts/chart/line'
	    ],
	    function (ec) {
	        var myChart = ec.init(document.getElementById('product')); 
	        option = {
	        	    title : {
	        	        text: '产品占比',
	        	        x:'center'
	        	    },
	        	    tooltip : {
	        	        trigger: 'item',
	        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	        	    },
	        	    legend: {
	        	        orient : 'vertical',
	        	        x : 'left',
	        	        data:proname
	        	    },
	        	    toolbox: {
	        	        show : true,
	        	        feature : {
	        	            dataView : {show: true, readOnly: false},
	        	            magicType : {
	        	                show: true, 
	        	                type: ['pie', 'funnel'],
	        	                option: {
	        	                    funnel: {
	        	                        x: '30%',
	        	                        width: '30%',
	        	                        funnelAlign: 'left',
	        	                        max: 1548
	        	                    }
	        	                }
	        	            }
	        	        }
	        	    },
	        	    calculable : true,
	        	    series : [
	        	        {
	        	            name:'访问来源',
	        	            type:'pie',
	        	            radius : '55%',
	        	            center: ['50%', '60%'],
	        	            data:prodata
	        	        }
	        	    ]
	        	}
	        myChart.setOption(option); 
	    }
	);
	</script>
</body>
</html>
